<template>
    <div class="pack">
        <div class="tree_container">
            <h3>机构列表</h3>
            <div class="treePack">
                <Tree :data="organizationTreeData" @on-select-change="organizationTreeChange"></Tree>
            </div>
        </div>
        <div class="detail_container">
            <h3>组织机构列表管理</h3>
            <div class="hunttool">
                <Button type="ghost" icon="ios-trash-outline" size="small" class="deltebtn" @click="batchDelete">删除</Button>
                <Button type="ghost" icon="edit" size="small" class="deltebtn" @click="batchEdit">修改</Button>
                <Button type="ghost" icon="ios-plus-empty" size="small" class="addbtn" @click="addnew">新增子节点</Button>
            </div>
            <div class="compile">
                <div style="text-align: center;padding-top: 25%;font-size: 18px;" v-if="!detailShow">您还未选中任何目录，请选中其中一个目录进行操作！</div>
                <div v-if="detailShow">
                    <Card dis-hover bordered style="margin-right: 10px">
                        <Form :model="formValidateCopy"  :label-width="100">
                            <Form-item label="单位名称" prop="">
                                <P>{{formValidateCopy.name}}</P>
                            </Form-item>
                            <Form-item label="主管人" prop="">
                                <P>{{formValidateCopy.director}}</P>
                            </Form-item>
                            <Form-item label="联系方式" prop="">
                                <P>{{formValidateCopy.phone}}</P>
                            </Form-item>
                            <Form-item label="办公地点" prop="">
                                <Input v-model="formValidateCopy.officeAddress" readonly type="textarea" :rows="4" style="width: 400px"></Input>
                            </Form-item>
                            <Form-item label="职能简述" prop="">
                                <Input v-model="formValidateCopy.businessDescription" readonly type="textarea" :rows="4" style="width: 400px"></Input>
                            </Form-item>
                        </Form>
                        <!--<p>单位名称：{{formValidateCopy.name}}</p>-->
                        <!--<p>主管人：{{formValidateCopy.director}}</p>-->
                        <!--<p>联系方式：{{formValidateCopy.phone}}</p>-->
                        <!--<p>办公地点：{{formValidateCopy.officeAddress}}</p>-->
                        <!--<p>职能描述：{{formValidateCopy.businessDescription}}</p>-->
                    </Card>
                </div>
            </div>
        </div>
        <!--新增、查看、修改弹出框-->
        <Modal v-model="compile" :title="compiletitle" :closable="false" :mask-closable="false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="单位名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入单位名称"></Input>
                </Form-item>
                <Form-item label="主管人" prop="director">
                    <Input v-model="formValidate.director" placeholder="请输入主管人"></Input>
                </Form-item>
                <Form-item label="联系方式" prop="phone">
                    <Input v-model="formValidate.phone" placeholder=""></Input>
                </Form-item>
                <Form-item label="办公地点" prop="officeAddress">
                    <Input v-model="formValidate.officeAddress" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                </Form-item>
                <Form-item label="职能简述" prop="businessDescription">
                    <Input v-model="formValidate.businessDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="ghost" @click="compileCancel()">取消</Button>
                <Button type="primary" @click="compileSubmit('formValidate')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            return {
                departmentCode:CURRENT_LEADER.departmentCode,  //登录人员code值
                valueLen:'', //点击树获得值的长度
                compile: false,
                detailShow:false,
                compiletitle:"编辑组织机构",
                //搜索存放点
                valueEsName:'',
                //机构树列表数据
                organizationTreeData:[],
                //新增的parentId
                newParentId:'',
                //分页页数
                pageNo:1,
                //分页共多条记录
                totalCount:0,
                //批量删除ID
                compiledele:'',
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '所属单位',
                        key: 'departmentName',
                    },
                    {
                        title: '存储点名称',
                        key: 'setPlace'
                    },
                    {
                        title: '地图编号',
                        key: 'mapNum'
                    },
                    {
                        title: '位置说明',
                        key: 'plDesc'
                    },
                    {
                        title: '编辑',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show()
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.supplieStorageRemoveByIds(params.row.id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],

                tabledata: [],
                formValidate: {
                    id:'',
                    businessDescription:'',
                    name: '',
                    phone:'',
                    code: '',
                    parentId: '',
                    officeAddress:'',
                    director:'',
                },
                formValidateCopy: {
                    id:'',
                    businessDescription:'',
                    name: '',
                    phone:'',
                    code: '',
                    parentId: '',
                    officeAddress:'',
                    director:'',
                },
                ruleValidate: {
                    name: [
                        { required: true, whitespace: true, message: '请填写单位名称', trigger: 'blur' }
                    ],
                    officeAddress: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                    businessDescription: [
                        { type: 'string', max: 200, message: '内容过长，最多200字', trigger: 'blur' }
                    ],
                }
            }
        },
        computed: {},
        created() {
//            this.supplieStorageFlipList();
            this.organizationFlipList();
        },
        methods: {
            //提示信息
            instance () {
                const title = '提示';
                const content = '<p>请在机构列表选择机构单位！</p>';
                this.$Modal.info({
                    title: title,
                    content: content
                });
            },
            //机构树点击事件
            organizationTreeChange(val){
                this.compiledele=val;
                this.valueLen = val.length;
                if(val.length>0 && this.departmentCode<=val[0].code){
                    this.detailShow=true;
                    this.organizationDetail(val[0].id);
                    this.newParentId=val[0].id;
                }else {
                    this.detailShow=false;
                    this.formValidate.parentId='';
                    this.formValidate.code='';
                }
            },
            //搜索
            searchData(){
                this.pageNo=1;
                this.supplieStorageFlipList();
            },
            //新增
            addnew(){
                this.compileReset('formValidate');
                this.formValidate.id="";
                if(!this.detailShow){
                    if( this.valueLen <= 0){
                        this.instance ();
                    }else{
                        this.$Message.error('权限不够，无法新增，请联系管理员！');
                    }
                }else {
                    this.formValidate.parentId=this.formValidateCopy.id;
                    this.formValidate.code=this.formValidateCopy.code;
                    this.compile = true;
                }
            },
            batchEdit(){
                if(this.compiledele.length>0){
                    this.formValidate.id=this.formValidateCopy.id;
                    this.formValidate.businessDescription=this.formValidateCopy.businessDescription;
                    this.formValidate.name=this.formValidateCopy.name;
                    this.formValidate.phone=this.formValidateCopy.phone;
                    this.formValidate.code=this.formValidateCopy.code;
                    this.formValidate.parentId=this.formValidateCopy.parentId;
                    this.formValidate.officeAddress=this.formValidateCopy.officeAddress;
                    this.formValidate.director=this.formValidateCopy.director;
                    this.compile = true;
                }else {
                    this.instance ();
                }
            },
            //取消
            compileCancel(){
                this.compile=false;
            },
            //分页改变时
            pageChange(val){
                this.pageNo=val;
                this.supplieStorageFlipList();
            },
            //表单重置
            compileReset (name) {
                this.$refs[name].resetFields();
            },
            //表格勾选
            compileSelect(selection,row){
                var ids="";
                for (var i=0;i<selection.length;i++){
                    ids=selection[i].id+","+ids;
                }
                this.compiledele=ids
            },
            //批量删除
            batchDelete(){
                if(this.compiledele.length>0){
//                    if(this.compiledele[0].children){
//                        const title = '提示';
//                        const content = '<p>所选单位有子机构无法删除！</p>';
//                        this.$Modal.info({
//                            title: title,
//                            content: content
//                        });
//                    }else {
//                        this.organizationRemoveByIds(this.compiledele[0].id)
//                    }
                    this.organizationRemoveByIds(this.compiledele[0].id)
                }else {
                    this.instance ();
                }
            },
            //新增或修改
            compileSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        ezjsUtil.request(apiConstants.organization_edit,
                            {
                                id:_this.formValidate.id,
                                businessDescription: _this.formValidate.businessDescription,
                                name: _this.formValidate.name,
                                phone: _this.formValidate.phone,
                                code: _this.formValidate.code,
                                parentId: _this.formValidate.parentId,
                                officeAddress: _this.formValidate.officeAddress,
                                director: _this.formValidate.director,
                            },
                            function (err, data) {
                                if (err) {
                                    return;
                                }
                                _this.valueLen='';
                                _this.formValidateCopy='';
                                _this.organizationFlipList();
                            }
                        )
                        _this.$Message.success('提交成功!');
                        _this.compile=false;
                        _this.detailShow=false;
                        _this.compileReset('formValidate');
                        _this.compiledele='';
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },


            //删除一个机构信息
            organizationRemoveByIds(delid){
                var _this = this;
                ezjsUtil.request(apiConstants.organization_removeByIds,
                    {
                        ids:delid
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        if(data){
                            _this.$Modal.info({
                                title: '提示',
                                content: '该机构下有人员无法删除，请检查！'
                            });
                        }else {
                            _this.detailShow=false;
                            _this.compileReset('formValidate');
                            _this.organizationFlipList();
                        }
                    }
                )
            },
            //获取所有组织机构树
            organizationFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    {  },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.organizationTreeData=data;
                        _this.organizationTreeData[0].expand=true;
                    }
                )
            },
            //显示一个组织机构信息
            organizationDetail(iddata) {
                var _this = this;
                ezjsUtil.request(apiConstants.organization_detail,
                    {
                        id:iddata,
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.formValidate.id=data.id;
                        _this.formValidate.businessDescription=data.businessDescription;
                        _this.formValidate.name=data.name;
                        _this.formValidate.phone=data.phone;
                        _this.formValidate.code=data.code;
                        _this.formValidate.parentId=data.parentId;
                        _this.formValidate.officeAddress=data.officeAddress;
                        _this.formValidate.director=data.director;
                        _this.formValidateCopy=data;
                    }
                )
            },
        },
        mounted() {
        }
    }
</script>
<style lang="less" scoped>
    .pack{
        width: 100%;
        height: 100%;
    }
    .tree_container{
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;
    h3{
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }
    }
    .detail_container{
        height: 100%;
        margin-left: 280px;
        overflow: hidden;
        overflow-y: auto;
    }
    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }
    .treePack{
        height: 94%;
        padding: 10px;
        overflow: auto;
    }
    .hunttool {
        height: 55px;
        padding:15px 0;
    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }
    .page_container{
        height: 30px;
        margin-top: 20px;
    .page_btn{
        float: right;
    }
    .page_text{
        float: right;
        line-height: 26px;
    }
    }
</style>